<template>
  <view>
    <!-- 		<uni-nav-bar
			v-if="isInIndex"
			title="订单"
			color="white"
			:border="false"
			:fixed="true"
			:status-bar="true"
			backgroundColor="#0BC5AE">
			</uni-nav-bar> -->
    <view class="main-container">
      <view class="top-tab-bar">
        <view
          @click="tabClick(item, index)"
          :class="current === index ? 'tab-item-selected' : ''"
          class="tab-item"
          v-for="(item, index) in tabs">
          {{ item }}
        </view>
      </view>

      <view
        class="order-card"
        v-for="(item, index) in list"
        @click="navToDetails(item)">
        <view class="time-and-status">
          <view class="time">{{ item.orderNum }}</view>
          <view class="status">{{ item.status }}</view>
        </view>
        <view class="project-row" v-for="itemInfo in item.itemInfos">
          <image :src="itemInfo.serviceItemImg" class="img"></image>
          <view class="name">{{ itemInfo.serviceItem }}</view>
        </view>
        <view class="info-row">
          <view class="name">就诊人</view>
          <view class="value">{{ item.visitor }}</view>
        </view>
        <view class="info-row">
          <view class="name">服务时间</view>
          <view class="value">{{ item.serviceTime || "" }}</view>
        </view>
        <view class="div-line" />
        <view class="price-and-pay">
          <view class="left">
            总价:
            <cn-money
              :money="Number.parseFloat(item.orderAmount)"
              :size="48"></cn-money>
          </view>
          <view
            class="cancel-btn"
            @click.stop="cancelOrder(item)"
            v-if="['待支付'].includes(item.status)">
            取消订单
          </view>
          <view
            class="cancel-btn"
            @click.stop="navToApplyRefund(item)"
            v-if="
              ['待评估', '待出发', '待派发', '待服务'].includes(item.status)
            ">
            取消订单
          </view>
          <view
            class="cancel-btn"
            v-if="!['已完成'].includes(item.status)"
            @click.stop="navToMaterialInfo(item)">
            耗材
          </view>
          <view
            class="ok-btn"
            v-if="['待支付', '服务中添加'].includes(item.status)">
            去付款
          </view>
          <!-- <view class="ok-btn" v-if="['结束待确认'].includes(item.status)" @click.stop="navToMaterialInfo(item)"> -->
          <view
            class="ok-btn"
            v-if="!['已完成'].includes(item.status)"
            @click.stop="navToMaterialEvaluate(item)">
            评价
          </view>
          <view
            class="ok-btn"
            v-if="['已完成'].includes(item.status)"
            @click.stop="navToReschedule(item)">
            再次预约
          </view>
          <view class="ok-btn" v-if="['结束待确认'].includes(item.status)">
            确认结束
          </view>
          <view class="ok-btn" v-if="false">退款</view>
          <view class="del-btn" @click.stop="del(item)" v-if="false">删除</view>
        </view>
        <template
          v-if="item.status === '服务中' && item.materialOrderInfo != null">
          <view class="div-line"></view>
          <view class="consumable-view">
            <view class="row row-2">
              <view class="left">医用耗材</view>
              <view class="right">
                <text style="color: red">
                  {{ item.materialOrderInfo.status }}
                </text>
              </view>
            </view>
            <view class="row row-2">
              <view class="left">耗材种类</view>
              <view class="right">
                {{ item.materialOrderInfo.materialCnt }}
              </view>
            </view>
            <view class="row row-2">
              <view class="left">
                总价:
                <cn-money
                  :size="30"
                  :money="
                    getTotalAmount(item.materialOrderInfo.totalAmount)
                  "></cn-money>
              </view>
              <view
                class="btn"
                @click.stop="navToConsumable(item)"
                v-if="item.materialOrderInfo.status === '待支付'">
                去支付
              </view>
              <view class="btn" @click.stop="navToConsumable(item)" v-else>
                查看耗材
              </view>
            </view>
          </view>
        </template>
      </view>
      <uni-load-more :status="status"></uni-load-more>
    </view>
  </view>
</template>

<script>
import * as orderInfo from "../../common/api/orderInfo.js";
import PageInfo from "../../utils/pageutils.js";
import cnMoney from "../../components/cn-money/cn-money";
export default {
  props: {
    isInIndex: false,
  },
  components: {
    cnMoney,
  },
  data() {
    return {
      tabs: [
        "全部",
        "服务中添加",
        "待支付",
        "待审核",
        "待出发",
        "待服务",
        "服务中",
        "结束待确认",
        "待评价",
        "已完成",
        "退款/售后",
        "已取消",
      ],
      current: 0,
      list: [],
      status: "",
      orderStatus: "全部", //支付状态
      status: "", //状态
      pageInfo: new PageInfo(),
      readForm: {},
      timer: null,
    };
  },
  onLoad(opt) {
    if (opt.type) {
      this.tabs.forEach((item, index) => {
        if (item === opt.type) {
          this.current = index;
          this.orderStatus = opt.type;
        }
      });
      const typeReadMap = {
        待支付: "paidIsRead",
        待审核: "checkIsRead",
        待出发: "setOutIsRead",
        待服务: "serviceIsRead",
      };
      this.readForm[typeReadMap[opt.type]] = "否";
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    this.timer = null;
  },
  mounted() {
    this.refresh();
    this.timing();
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    this.loadMore();
  },

  computed: {
    showDelBtn() {
      if (process.env.NODE_ENV === "development") {
        //console.log('开发环境');
        return true;
      } else {
        //console.log('生产环境');
        return false;
      }
    },
  },
  methods: {
    tabClick(item, index) {
      this.current = index;
      this.orderStatus = item;
      this.refresh();
    },
    refresh() {
      this.pageInfo.reset();
      this.list = [];
      this.status = "loading";
      this.getList();
    },
    loadMore() {
      if (this.pageInfo.isNotLoadAll) {
        this.status = "loading";
        this.pageInfo.nextPage();
        this.getList();
      } else {
        this.status = "noMore";
      }
    },
    timing() {
      this.timer = setInterval(() => {
        this.refresh();
      }, 60000);
    },
    getList() {
      const param = {
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize,
        wxOpenid: uni.getStorageSync("openid_key"),
        ...this.readForm,
      };
      if (this.orderStatus === "全部") {
        param.statusList = [
          "待评估",
          "服务中添加",
          "待支付",
          "待出发",
          "待服务",
          "服务中",
          "结束待确认",
          "待评价",
          "已完成",
          "待退款",
          "退款中",
          "已退款",
          "已拒绝",
        ];
      } else if (this.orderStatus === "退款/售后") {
        param.statusList = ["待退款", "退款中", "已退款", "已拒绝"];
      } else if (this.orderStatus === "待审核") {
        param.status = "待评估";
      } else if (this.orderStatus === "待评价") {
        param.statusList = ["结束待确认", "已完成"];
        param.isEvaluate = "否";
      } else {
        param.status = this.orderStatus;
      }
      orderInfo
        .queryByPage(param)
        .then((result) => {
          const list = result.data.data.rows || [];
          const total = result.data.data.total;
          this.list = [...this.list, ...list];
          this.pageInfo.total = total;
          this.pageInfo.loadedTotal = this.list.length;
          setTimeout(() => {
            if (this.pageInfo.isNotLoadAll) {
              this.status = "more";
            } else {
              this.status = "noMore";
            }
            uni.stopPullDownRefresh();
          }, 1000);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    navToDetails(item) {
      const itemStr = encodeURIComponent(JSON.stringify(item));
      uni.navigateTo({
        // url: "/patientAppPages/pages/orderDetails/orderDetails?uid=" + item.uid,
        url: `/patientAppPages/pages/orderDetails/orderDetails?item=${itemStr}`,
      });
    },
    navToApplyRefund(item) {
      uni.navigateTo({
        url: "/patientAppPages/pages/applyRefund/applyRefund?uid=" + item.uid,
      });
    },
    cancelOrder(item) {
      uni.showModal({
        title: "提示",
        content: "确认取消订单？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              uid: item.uid,
              status: "已取消",
            };
            orderInfo
              .update(param)
              .then((result) => {
                this.refresh();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    del(item) {
      uni.showModal({
        title: "确认删除",
        content: "确认删除数据",
        success(res) {
          if (res.confirm) {
            const param = {
              uid: item.uid,
            };
            orderInfo
              .deleteById(param)
              .then((result) => {
                uni.showToast({
                  title: "删除成功",
                });
                this.refresh();
              })
              .catch((error) => {
                console.log(error);
              });
          }
        },
      });
    },
    navToConsumable(item) {
      uni.navigateTo({
        url:
          "/patientAppPages/pages/consumableList/consumableList?mOrderNum=" +
          item.materialOrderNum,
      });
    },
    getTotalAmount(val) {
      if (!val) {
        return 0;
      }
      return Number.parseFloat(val);
    },
    navToMaterialInfo(item) {
      uni.navigateTo({
        url: "/patientAppPages/pages/consumable/consumable?uid=" + item.uid,
      });
    },
    //评价
    navToMaterialEvaluate(item) {
      uni.navigateTo({
        url:
          "/patientAppPages/pages/userEvaluation/userEvaluation?uid=" +
          item.uid,
      });
    },
    //再次预约
    navToReschedule(item) {
      console.log(item);
      // 将对象转为JSON字符串并编码
      const itemStr = encodeURIComponent(JSON.stringify(item));
      uni.navigateTo({
        url: `/patientAppPages/pages/RescheduleDetails/RescheduleDetails?item=${itemStr}`,
      });
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
  background: #f9f9f9;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.top-tab-bar {
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, 150rpx);
  grid-template-rows: repeat(auto-fit, 66rpx);
  grid-column-gap: 20rpx;
  grid-row-gap: 26rpx;
  background: #f9f9f9;

  // position: sticky;
  // top: 0;
  // z-index: 2;
  .tab-item {
    width: 150rpx;
    height: 66rpx;
    background: #f1f1f1;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(35, 35, 35, 0.8);
    font-size: 26rpx;
  }

  .tab-item-selected {
    background: #dff0ef;
    color: #0bc5ae;
  }
}

.order-card {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;

  .time-and-status {
    display: flex;

    .time {
      flex: 1;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .status {
      font-size: 30rpx;
      color: #f5803d;
    }
  }

  .project-row {
    display: flex;
    align-items: center;
    margin-top: 36rpx;

    .img {
      width: 136rpx;
      height: 136rpx;
      border-radius: 20rpx;
    }

    .name {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 24rpx;
    }
  }

  .info-row {
    display: flex;
    margin-top: 40rpx;

    .name {
      width: 136rpx;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .value {
      color: #232323;
      font-size: 26rpx;
    }
  }

  .div-line {
    width: 100%;
    height: 2rpx;
    background: #f8f8f8;
    margin-top: 40rpx;
  }

  .price-and-pay {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    .left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .cancel-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx rgba(35, 35, 35, 0.26);
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(35, 35, 35, 0.8);
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }

    .ok-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx #0bc5ae;
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0bc5ae;
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }
  }
}

.del-btn {
  width: 60rpx;
  height: 40rpx;
  border: solid 2rpx #c5070a;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c5070a;
  font-size: 14rpx;
  margin-left: 8rpx;
  margin-right: 8rpx;
}

.consumable-view {
  margin-top: 10rpx;

  .row {
    display: flex;
    align-items: center;
    min-height: 80rpx;
  }

  .row-2 {
    justify-content: space-between;
  }

  .left {
    width: 156rpx;
    font-size: 26rpx;
    color: rgba(35, 35, 35, 0.7);
  }

  .right {
    color: #232323;
    font-size: 26rpx;
    margin-left: 20rpx;
  }

  .btn {
    border: solid 2rpx #0bc5ae;
    color: #0bc5ae;
    width: 150rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 60rpx;
  }
}
</style>
